class Setting extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            count: 0,
            length: 0,
            deposit: 0,
            borrowdate: 0,
            rent: 0,
            maxborrow: 0,
            price: 0,
            name: '',
            imgsrc: "",
            lbhtml: [],
            hlbimgarr: [],
        };
    }




    componentDidMount() {
        this.freshlist();
    }
    freshlist() {
        getsetting((res) => {
            console.log(res)
            if (res.issuccess == 1) {
                let { piclength, piccount, deposit, borrowdate, rent, maxborrow, parenting_price, applet_name, hbgimg } = res.data, { price } = this.state,
                    hlbimgarr = [], lbhtml = [];
                deposit = Math.floor(deposit) / 100;
                rent = Math.floor(rent) / 100;
                price = (parenting_price / 100).toFixed(2);
                // let imgsrc = `${API_HEAD}imgs/${hbgimg}`
                let lbimgarr = hbgimg.split(",")
                lbimgarr.forEach((y, i) => {
                    let j = `${API_HEAD}imgs/${y}`
                    hlbimgarr.push(j)
                })
                hlbimgarr.forEach((x, i) => {
                    lbhtml.push(
                        <div className="img_warp">
                            <img src={x} className="img" />
                            <img className='closeimg' onClick={this.del_lbimg.bind(this, i)} src='./src/img_close.png' />
                        </div>
                    )
                })
                this.setState({ length: piclength, count: piccount, deposit, borrowdate, rent, maxborrow, price, lbhtml, hlbimgarr });
                // $("#pay"+buytype).attr("checked","true");
            } else {
                console.log(res);
            }
        });
    }




    // scorerule(e) {
    //     this.setState({ length: e.target.value })
    //     console.log(e.target.value)

    // }
    // scorerules(e) {
    //     console.log(e.target.value)
    //     this.setState({ count: e.target.value })
    // }
    // times(e) {
    //     console.log(e.target.value)
    //     this.setState({ borrowdate: e.target.value })
    // }
    // moneys(e) {
    //     console.log(e.target.value)
    //     this.setState({ deposit: e.target.value })
    // }
    // rents(e) {
    //     console.log(e.target.value)
    //     this.setState({ rent: e.target.value })
    // }
    // maxborrows(e) {
    //     console.log(e.target.value)
    //     this.setState({ maxborrow: e.target.value })
    // }
    submit() {
        var { length, count, deposit, borrowdate, rent, maxborrow, price, imgsrc } = this.state, err = '', imgarr = [];
        // console.log(length,count)
        // if(isNaN(length)||length<1||length>11){
        //     alert('请输入1-10的正整数');
        //     return;
        // }
        // if(isNaN(count)||count<1||count>10){
        //     alert('请输入1-9的正整数');
        //     return;
        // }
        // if (isNaN(price) || price < 1 || price > 999) {
        //     alert('请输入1-999的正整数');
        //     return;
        // }
        // if (isNaN(deposit) || deposit < 1 || deposit > 999) {
        //     alert('请输入1-999的正整数');
        //     return;
        // }
        // if (isNaN(borrowdate) || borrowdate < 1 || borrowdate > 999) {
        //     alert('请输入1-999的正整数');
        //     return;
        // }
        // if (isNaN(rent) || rent < 1 || rent > 999) {
        //     alert('请输入1-999的正整数');
        //     return;
        // }
        // console.log(name, 'name');

        // if (name == '' || name == null) err = '请输入小程序分享副名称'
        // if (!imgsrc) err = "请添加背景图"
        if (price <= 0 || price == '') err = '请输入育儿分享金额'
        if (maxborrow <= 0 || maxborrow == '') err = '请输入借阅量'
        if (rent <= 0 || rent == '') err = '请输入借阅租金'
        if (deposit <= 0 || deposit == '') err = '请输入借阅押金'
        if (borrowdate <= 0 || borrowdate == '') err = '请输入借阅时间'
        if (count <= 0 || count == '') err = '请输入图片张数'
        if (length <= 0 || length == '') err = '请输入图片的像素单位'
        if (err.length > 0) {
            alert(err)
            return;
        }
        // imgarr = imgarr.concat(imgsrc)
        // this.uploadimg(imgarr)

        length = Math.floor(length);
        count = Math.floor(count);
        borrowdate = Math.floor(borrowdate);
        deposit = Math.floor(deposit) * 100;
        rent = Math.floor(rent) * 100;
        price = price * 100;
        var submitdata = { length, count, deposit, borrowdate, rent, maxborrow, price };
        console.log(length, count, borrowdate, rent, maxborrow, price)

        editsettings(submitdata, res => {
            if (res.issuccess == 1) {
                alert("保存成功");
                // this.freshlist();
            } else {
                alert(res.msg)
            }
        })
    }
    inputchange(prop, e) {
        // let { target } = this.state;
        // target[prop] = e.target.value
        // this.setState({ target })
        this.setState({ [prop]: e.target.value })
    }

    // 图片
    filechangeimg(e) {
        var that = this;
        var filedata = $('#file' + e)[0].files[0];
        let _name, _fileName, filedatasize = 10240;

        _name = $('#file' + e)[0].value;
        _fileName = _name.substring(_name.lastIndexOf(".") + 1).toLowerCase();
        if (_fileName !== "png" && _fileName !== "jpg" && _fileName !== "gif" && _fileName !== "jpeg") {
            alert("上传图片格式不正确，请重新上传");
        } else {
            if (filedatasize < filedata.size / 1024) {
                alert("上传图片不能大于10M");
                return;
            }

            let filee = e
            var reader = new FileReader();
            reader.readAsDataURL(filedata);
            reader.onload = function (e) {
                var base64str = e.target.result;
                that.putswiperimglistdata([base64str], filee)
            }
        }
    }
    putswiperimglistdata(target, prop) {
        let { hlbimgarr } = this.state, imgsrc = '', that = this;
        if (prop == 'lb') {
            let lbhtml = []
            imgsrc = target[0]
            if (!isBase64(imgsrc)) {
                if (imgsrc.indexOf(`${API_HEAD}`) == -1) {
                    imgsrc = `${API_HEAD}imgs/${imgsrc}`

                }
            }
            hlbimgarr.push(imgsrc)
            hlbimgarr.forEach((x, i) => {
                lbhtml.push(
                    <div className="img_warp">
                        <img src={x} className="img" />
                        <img className='closeimg' onClick={this.del_lbimg.bind(this, i)} src='./src/img_close.png' />
                    </div>
                )
            })
            this.setState({ lbhtml, hlbimgarr })
        } else {

            imgsrc = target[0]
            if (!isBase64(imgsrc)) {
                if (imgsrc.indexOf(`${API_HEAD}`) == -1) {
                    imgsrc = `${API_HEAD}imgs/${imgsrc}`

                }
            }

            that.setState({ [prop]: imgsrc })

        }

    }
    clickupload(e) {
        $('#file' + e).click();
    }
    del_lbimg(index) {
        let { hlbimgarr } = this.state, lbhtml = []
        hlbimgarr.splice(index, 1)
        hlbimgarr.forEach((x, i) => {
            lbhtml.push(
                <div className="img_warp">
                    <img src={x} className="img" />
                    <img className='closeimg' onClick={this.del_lbimg.bind(this, i)} src='./src/img_close.png' />
                </div>
            )
        })
        this.setState({ lbhtml, hlbimgarr })
    }
    del_img(prop) {
        this.setState({ [prop]: '' })

    }
    // 上传图片
    uploadimg(arr) {
        let uploadimgarr = [],
            { hlbimgarr } = this.state,
            that = this, lbimgarr = []
        arr.forEach((x, i) => {
            if (x.indexOf(`${API_HEAD}`) == -1) {
                if (isBase64(x)) {
                    uploadimg(x, res => {
                        if (res.issuccess == 1) {
                            x = `${API_HEAD}imgs/${res.path}`
                            uploadimgarr.push(x)
                        } else {
                            alert(res.msg)
                            err = 1
                            return;
                        }
                    })
                }
            } else {
                uploadimgarr.push(x)
            }
        })
        if (uploadimgarr.length == arr.length) {
            uploadimgarr.forEach((x, i) => {
                let lb = x.replace(`${API_HEAD}imgs/`, '')
                lbimgarr.push(lb)
                // if (i == 0) {
                //     imgsrc = x.replace(`${API_HEAD}imgs/`, '')
                // } else {
                //     let lb = x.replace(`${API_HEAD}imgs/`, '')
                //     lbimgarr.push(lb)
                // }
            })
            let lbimg = String(lbimgarr)

            sethbgimg(lbimg, res => {
                if (res.issuccess == 1) {
                    alert("保存成功");
                } else {
                    alert(res.msg)
                }
            })
        }
    }

    submit1() {
        let { hlbimgarr } = this.state, that = this, err = '', imgarr = [];
        if (hlbimgarr.length < 1) {
            alert("请添加图片");
            return
        }
        that.uploadimg(hlbimgarr)
    }


    render() {
        let { lbhtml } = this.state;

        return (



            <div className="breadLinebox">
                <div className='content_wrap panel-default content_wrap'>
                    <div className="breadLine">
                        <div className="img">
                            {/* <img src={Constant.LEFTMENU_ORDER} /> */}
                            当前位置 {">"} 参数设置
                        </div>
                    </div>
                    <div className="content form">
                        <div className="formtitle">
                            <p>参数设置</p>
                        </div>
                        <div className="formbox">
                            <div className="formcontent">
                                <div className="input-group">
                                    <span className="input-group-addon">单张图片长度:</span>
                                    <input onChange={this.inputchange.bind(this, 'length')} placeholder='请输入图片的像素单位' value={this.state.length} type="text" className="input" />
                                </div>
                                <div className="input-group">
                                    <span className="input-group-addon">上传图片最大张数:</span>
                                    <input onChange={this.inputchange.bind(this, 'count')} placeholder='请输入图片张数' value={this.state.count} type="text" className="input" />
                                </div>

                                <div className="input-group">
                                    <span className="input-group-addon">借阅时间:</span>
                                    <input onChange={this.inputchange.bind(this, 'borrowdate')} placeholder='请输入借阅时间' value={this.state.borrowdate} type="text" className="input" />
                                </div>


                                <div className="input-group">
                                    <span className="input-group-addon">借阅押金：</span>
                                    <input onChange={this.inputchange.bind(this, 'deposit')} placeholder='请输入借阅押金' value={this.state.deposit} type="text" className="input" />
                                </div>


                                <div className="input-group">
                                    <span className="input-group-addon">借阅租金：</span>
                                    <input onChange={this.inputchange.bind(this, 'rent')} placeholder='请输入借阅租金' value={this.state.rent} type="text" className="input" />
                                </div>

                                <div className="input-group">
                                    <span className="input-group-addon">借阅量：</span>
                                    <input onChange={this.inputchange.bind(this, 'maxborrow')} placeholder='请输入借阅量' value={this.state.maxborrow} type="text" className="input" />
                                </div>
                                <div className="input-group">
                                    <span className="input-group-addon">育儿分享金额：</span>
                                    <input onChange={this.inputchange.bind(this, 'price')} placeholder='请输入育儿分享金额' value={this.state.price} type="text" className="input" />
                                </div>
                                <div className="submitbox">
                                    <button type="button" onClick={this.submit.bind(this)} className="submitbutton">提交</button>

                                </div>

                                <div className="input-group">
                                    <p className="lbtit"><span className="label input-group-addon">H5背景图片</span></p>
                                    <input onChange={this.filechangeimg.bind(this, 'lb')} type='file' id='filelb' style={{ display: "none" }} />
                                    <div className='detail_btns lbimgbox'>
                                        <div>
                                            {lbhtml}
                                        </div>
                                        <img className='fileimg' src='./src/upload_btn.png' onClick={this.clickupload.bind(this, 'lb')} />
                                    </div>
                                </div>


                                <button type="button" onClick={this.submit1.bind(this)} className="submitbutton">保存图片</button>

                                {/* <div className="input-group">
                                    <span className="input-group-addon">小程序副名称：</span>
                                    <input onChange={this.inputchange.bind(this, 'name')} placeholder='请输入小程序分享副名称' value={this.state.name} type="text" className="input" />
                                </div> */}
                            </div>
                        </div>

                    </div>
                </div>


            </div>

            // <div className='content_wrap panel-default content_wrap'>

            //     <div className='breadLine '> 
            //         当前位置 > 参数设置
            //     </div>
            //     <div className='inputs panel-body'>
            //         <h3 style={{marginBottom:"10px"}}>参数设置</h3>
            //         <div className='search'>
            //             <div className='number'>
            //                 <span  >单张图片长度:</span>
            //                 <input onChange={this.scorerule.bind(this)} placeholder='请输入图片的像素单位' value={this.state.length}/>
            //                 <span style={{color:"red"}}>单张图片像素1-10M</span>
            //             </div>
            //         </div>
            //         <div className='search'>
            //             <div className='number'>
            //                 <span  >上传图片最大张数:</span>
            //                 <input onChange={this.scorerules.bind(this)} placeholder='请输入图片张数' value={this.state.count}/>
            //                 <span style={{color:"red"}}>上传图片最大张数1-9</span>
            //             </div>
            //         </div>
            //         <div className='search'>
            //             <div className='number'>
            //                 <span  >借阅时间：</span>
            //                 <input onChange={this.times.bind(this)} placeholder='请输入借阅时间' value={this.state.borrowdate}/>
            //                 <span style={{color:"red"}}>借书时间最长1-999天</span>
            //             </div>
            //         </div>
            //         <div className='search'>
            //             <div className='number'>
            //                 <span  >借阅押金：</span>
            //                 <input onChange={this.moneys.bind(this)} placeholder='请输入借阅押金' value={this.state.deposit}/>
            //                 <span style={{color:"red"}}>借书押金最多1-999块</span>
            //             </div>
            //         </div>
            //         <div className='search'>
            //             <div className='number'>
            //                 <span  >借阅租金：</span>
            //                 <input onChange={this.rents.bind(this)} placeholder='请输入借阅租金' value={this.state.rent}/>
            //                 <span style={{color:"red"}}>借书租金最多1-999块</span>
            //             </div>
            //         </div>
            //         <div className='search'>
            //             <div className='number'>
            //                 <span  >借阅量：</span>
            //                 <input onChange={this.maxborrows.bind(this)} placeholder='请输入借阅量' value={this.state.maxborrow}/>
            //                 <span style={{color:"red"}}>图书的借阅量最多1-999本</span>
            //             </div>
            //         </div>
            //     </div>
            //         <p className='btn add btn-primary center' onClick={this.submit.bind(this)}>保存</p>

            // </div>


        )
    }
}





ReactDOM.render(
    <div>
        <TopLine />
        {/* <LeftMenu code='7'/> */}
        <LeftMenu code='setting' />
        <Setting />

    </div>
    //<Barrage/>
    , $('.container')[0]
)